<template>
  <a-form
    ref="formRef"
    name="advanced_search"
    {...formSetting}
    class="ant-advanced-search-form"
    :model="dataObj"
  >
    <a-row :gutter="16">
      <a-col v-for="field in fieldSetting" :span="colSpan" :key="field.name">
        <FormItem :dataObj="dataObj" :fieldConfig="field"></FormItem>
      </a-col>
      <a-col v-if="!btnBottom">
        <component
          :is="formBtnType"
          :expand="showAll"
          @changeExpand="changeExpand"
          @resetFields="resetFields"
          @formSubmit="formSubmit"
        ></component>
      </a-col>
    </a-row>
    <template v-if="btnBottom">
      <component
        :is="formBtnType"
        :expand="showAll"
        @changeExpand="changeExpand"
        @resetFields="() => {}"
        @formSubmit="formSubmit"
      ></component>
    </template>
  </a-form>
</template>
<script lang="ts">
import { defineComponent, type PropType, ref } from 'vue'
import { type formField } from '../type'
import FormProps from 'ant-design-vue/es/form'
import { Form } from 'ant-design-vue'
import FormItem from './FormItem'
import FormBtn_Query from './FormBtn_Query.vue'
import FormBtn_Submit from './FormBtn_Submit.vue'

export default defineComponent({
  name: 'wt_from_vue',
  components: {
    FormItem,
    FormBtn_Query,
    FormBtn_Submit
  },
  props: {
    type: { type: String, default: 'query', required: false }, //query 查询表单 ，submit 信息输入表单
    dataObj: { type: Object, default: () => ({}), required: false }, //表单 数据对象
    formSetting: { type: FormProps }, //表单设置信息
    fieldSetting: { type: Array as PropType<Array<formField>>, required: true }, //表单输入项输入信息
    defaultShowCount: { type: Number, default: 3 } //表单项布局
  },

  setup(props, ctx) {
    /**表单项数量 */
    const fieldCount = props.fieldSetting.length
    /**表单项布局宽度 */
    let colSpan = 24 % props.defaultShowCount
    /**是否展开所有输入项 */
    const showAll = ref(false)
    /**表单对象 */
    const formRef = ref()

    /**表单按钮组件类型 */
    let formBtnType = 'FormBtn_Query'

    /**表单按钮是否只显示在底部 */
    let btnBottom = false
    //如果是信息提交表单，提交按钮只显示在表单底部，没有展开按钮
    if (fieldCount >= props.defaultShowCount || props.type === 'query') {
      btnBottom = true
    }
    if (props.type === 'query') {
      formBtnType = 'FormBtn_Submit'
    }
    /**表单输入项展开变更事件 */
    const changeExpand = (expand: boolean) => {
      showAll.value = expand
    }
    /**表单输入项清空事件 */
    const resetFields = () => {
      formRef.value.resetFields()
    }
    /**表单输入项提交事件 */
    const formSubmit = () => {}

    return {
      fieldCount,
      colSpan,
      showAll,
      formRef,
      formBtnType,
      btnBottom,
      changeExpand,
      resetFields,
      formSubmit
    }
  }
})
</script>

<style scoped>
#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 2px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
[data-theme='dark'] .ant-advanced-search-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #434343;
  padding: 24px;
  border-radius: 2px;
}
[data-theme='dark'] #components-form-demo-advanced-search .search-result-list {
  border: 1px dashed #434343;
  background: rgba(255, 255, 255, 0.04);
}
</style>
